<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="经销商姓名" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="手机号" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="门店名称" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="法人姓名" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="门店状态" style="margin-right: 40px">
                <el-select>
                    <el-option />
                </el-select>
            </el-form-item>
            <el-form-item label="门店地址" style="margin-right: 40px">
                <el-cascader
                v-model="selectedOptions"
                :options="pcaTextArr"
                @change="handleChange"
                :props="{ checkStrictly: true }"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址关键字" style="margin-right: 40px">
                <el-input />
            </el-form-item>
            <el-form-item label="所属战队" style="margin-right: 40px">
                <el-select>
                    <el-option />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 40px">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="button-table">
            <el-button size="mini">导出</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column prop="date" label="经销商姓名" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="角色/职务" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="手机号" fixed :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="营业执照" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="统一社会信用代码" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="法人姓名" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="员工规模（人）" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="门店地址" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="详细地址" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="收货人姓名" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="收货人手机号" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="门店状态" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="所属战队" :align="tableAlign">
            </el-table-column>
            <el-table-column prop="name" label="创建时间" :align="tableAlign">
            </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <div class="el-upload__tip" slot="tip">
                        <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的资源数据
                    </div>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                        @click="importTemplate">下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { getToken } from "@/utils/auth"
  import { pcaTextArr } from "element-china-area-data";
  export default {
    dicts: ['source_of_resources'],
    data() {
      return {
        pcaTextArr,
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        },
        tableAlign: "center",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
        selectRadio: "1",
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
      };
    },
    methods: {
      getList() {},
      handleQuery() {},
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.pageNum = 1;
      },
    },
  };
  </script>

<style lang="scss" scoped>
.app-container {
    .top-title {
        margin-bottom: 20px;
    }

    .button-table {
        margin-bottom: 20px;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }
}
</style>